<template>
	<view class="my">
		<!-- 没登录的状态显示的 -->
		<view class="asyyds" v-if="huazi">
			<view class="asHead">
				<view class="letleft">
					<image src="../../static/icons/头像3.png" mode=""></image>
				</view>
				<view class="letright">
					<view class="one">
						hi ~ ~
					</view>
					<view class="one">
						你还没登录呢
					</view> 
				</view>
			</view>
			<!-- 登录和注册 -->
			<view class="asBody" v-if="huazi">
				<view class="denglu" @tap="gouLogin">
					登录
				</view>
				<view class="denglu zuce" @tap="goRegister">
					注册
				</view>
			</view>
		</view>
		<!-- 登录后显示 头像 -->
		<view class="xfqyyds" v-if="!huazi">
			<view class="asHead">
				<view class="letleft" @tap="gouModification">
					<image :src="yonhu.icon" mode=""></image>
				</view>
				<view class="letright">
					<view class="one">
						昵称：{{yonhu.nickname}}
					</view>
					<view class="one">
						ID：{{yonhu.id}}
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="bsyyds">
			<view class="bsHead">
				<view class="one">
					我的订单
				</view>
				<view class="iconfont icon-fangxiang-xiangyou icon">

				</view>
			</view>
			<view class="bsBody">
				<view class="bsName" v-for="item in dingList" :key="item.id" @click="dingdan(item.id)">
					<image :src="item.img" mode=""></image>
					<view class="bswen">
						
					{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 相关小功能 -->
		<view class="csyyds">
			<view class="csbox">
				<view class="boxOne" v-for="item in styleList" :key="item.id" @click="tiaoZhuan(item.id)">
					<view class="boximg">
						<image :src="item.img" mode=""></image>
					</view>
					
					<view class="wen">
						{{item.name}}
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import{myList}from '@/api/my/my.js'
	export default {
		name:"My",
		data() {
			return {
				// 用户信息
				yonhu:{},
				// 登录和注册按钮的显示与隐藏
				huazi:true,
				// 订单样式数据
				dingList:[
					{
						id:1,
						name:'待付款',
						img:'../../static/icons/代付款.png'
					},
					{
						id:2,
						name:'已付款',
						img:'../../static/icons/卡包.png'
					},
					{
						id:3,
						name:'待收货',
						img:'../../static/icons/待收货.png'
					},
					{
						id:4,
						name:'已完成',
						img:'../../static/icons/已完成.png'
					},
					{
						id:5,
						name:'售 后',
						img:'../../static/icons/售后.png'
					},
				],
				// 相关功能样式
				styleList:[
					{
						id:1,
						name:'收 藏',
						img:'../../static/icons/收藏2.png'
					},
					{
						id:2,
						name:'品 牌',
						img:'../../static/icons/品牌.png'
					},
					{
						id:3,
						name:'文 章',
						img:'../../static/icons/文章.png'
					},
					{
						id:4,
						name:'地 址',
						img:'../../static/icons/地址.png'
					},
					{
						id:5,
						name:'卡 包',
						img:'../../static/icons/卡包.png'
					},
					{
						id:6,
						name:'购物车',
						// 
						img:'../../static/icons/购物车.png'
					},
					{
						id:7,
						name:'客 服',
						img:'../../static/icons/客服.png'
					}
				]
			};
		},
		methods:{
			// 跳转登录页面
			gouLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 跳转注册页面
			goRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			// 跳转到修改用户信息页面
			gouModification(){
				uni.navigateTo({
					url:'/pages/modification/modification'
				})
			},
			// 根据ID跳转到其它相对应的页面
			tiaoZhuan(id){
				console.log(id)
				if(id == 1){
					console.log('收藏页面')
					uni.showToast({
						title:'收藏页面暂未开通',
						icon:'error'
					})
				} else if(id == 2) {
					console.log('品牌页面')
					uni.showToast({
						title:'品牌页面未开通',
						icon:'error'
					})
				}else if(id == 3) {
					console.log('文章页面')
					uni.showToast({
						title:'文章页面暂未开通',
						icon:'error'
					})
				}else if(id == 4) {
					console.log('地址页面')
					uni.navigateTo({
						url:'/pages/location/location'
					})
				}else if(id == 5) {
					console.log('卡包页面')
					uni.showToast({
						title:'卡包页面暂未开通',
						icon:'error'
					})
				}else if(id == 6) {
					console.log('购物车页面')
					uni.navigateTo({
						url:'/pages/cartLIst/cartLIst'
					})
				}else if(id == 7) {
					console.log('客服页面')
					uni.showToast({
						title:'客服页面暂未开通',
						icon:'error'
					})
				}
				
			},
			// 根据ID跳转到第二页面   pages/my/myOrder/myOrder/myOrder
			dingdan(id){
				console.log(id)
				uni.navigateTo({
					url:`/pages/my/myOrder/myOrder/myOrder?id=${id}`
				})
				
				
			}
		},
		onLoad() {
			// 进入页面就获取本地存储的 token值
			var result = uni.getStorageSync("token");
			// console.log(result)
			// 判断本地有没有值，有的话就显示 登陆后的样式，否则就显示没登陆的样式
			if(result){
				this.huazi = !this.huazi
			} else{
				this.huazi = this.huazi
			}
			
			// 获取登陆后的用户信息
			myList().then(res=>{
				console.log(res.data.data.userInfo)
				this.yonhu = res.data.data.userInfo
			})
		}
	};
</script>

<style lang="less">
	.my {
		width: 100%;
		height: 100vh;
		background-color: #f4e8ab;

		// 头像区域
		.asyyds {
			width: 100%;
			height: 310rpx;
			padding: 30rpx 40rpx 0;
			box-sizing: border-box;

			.asHead {
				width: 100%;
				height: 150rpx;
				margin-bottom: 52rpx;
				display: flex;
				align-items: center;

				.letleft {
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
					border-radius: 50%;
					border: 4rpx solid #ff5cd9;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.letright {
					color: #3D4C46;
					font-size: 28rpx;
				}
			}

			.asBody {
				width: 100%;
				height: 76rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.denglu {
					width: 182rpx;
					height: 74rpx;
					font-size: 30rpx;
					text-align: center;
					line-height: 74rpx;
					border: 1rpx solid #024d19;
					border-radius: 10rpx;
					box-sizing: border-box;
				}

				.zuce {
					color: #fff;
					;
					background-color: #024d19;
				}
			}
		}
		// 登录后的
		.xfqyyds {
			width: 100%;
			height: 310rpx;
			padding: 100rpx 40rpx 0;
			box-sizing: border-box;
		
			.asHead {
				width: 100%;
				height: 150rpx;
				margin-bottom: 52rpx;
				display: flex;
				align-items: center;
		
				.letleft {
					width: 150rpx;
					height: 150rpx;
					margin-right: 50rpx;
					border-radius: 50%;
					border: 4rpx solid #ff5cd9;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
		
				.letright {
					color: #3D4C46;
					font-size: 28rpx;
				}
			}
		
		}

		// 订单区域
		.bsyyds {
			margin-top: 30rpx;
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;

			.bsHead {
				background-color: #fff;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 56rpx;

				.one {}

				.icon {
					color: #000000;
					font-size: 26rpx;
				}
			}

			.bsBody {
				width: 100%;
				padding: 0 56rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.bsName{
					width: 90rpx;
					height: 100rpx;
					text-align: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin: 10rpx auto;
					}
					.bswen{
						font-size: 26rpx;
					}
				}
			}
		}
		// 相关小功能
		.csyyds{
			margin: 40rpx 0 40rpx;
			padding: 0 40rpx;
			.csbox{
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: flex-start;
				background-color: #fff;
				.boxOne{
					width: 33%;
					flex-shrink: 0;
					background-color: #ffffff;
					.boximg{
						width: 60rpx;
						height: 50rpx;
						margin: 25rpx auto;
						// margin: 25rpx ;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.wen{
						width: 60%;
						height: 37rpx;
						text-align: center;
						margin: 25rpx auto;
						overflow: hidden;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
